<!--
 * @Author: wwssaabb
 * @Date: 2021-10-20 08:55:44
 * @LastEditTime: 2021-10-27 15:09:46
 * @FilePath: \CloudMusic-for-Vue3\src\views\User\Home.vue
-->
<template>
  <div class="user-home-page" v-loading="data.detail === null" v-if="!data.is404">
    <Head
      :detail="data.detail?.profile"
      :level="data.detail.level"
      v-if="data.detail"
    ></Head>
    <template v-if="data.isHome">
      <DjList
        v-if="data.detail && !data.jRadiosIsEmpty"
        :list="data.djRadios"
        :title="data.detail.profile.nickname + '创建的电台'"
      ></DjList>
      <SongRank
        :list="data.playRecord.slice(0, 10)"
        :listenSongs="data.detail.listenSongs"
        :changeType="changeType"
        :chooseType="data.playRecordType"
        :isEmpty="data.playRecordStatus[data.playRecordType ? 0 : 1]"
        v-if="
          data.detail &&
          data.detail.peopleCanSeeMyPlayRecord &&
          !(data.playRecordStatus[0] && data.playRecordStatus[1])
        "
      ></SongRank>
      <Playlist
        v-if="data.detail && !data.playlist.isEmpty"
        :title="
          data.detail.profile.nickname +
          '创建的歌单®（' +
          data.detail.profile.playlistCount +
          '）'
        "
        :list="data.playlist.list"
      ></Playlist>
    </template>
    <RouterView v-else></RouterView>
  </div>
  <Empty404 v-else></Empty404>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, nextTick } from "vue";
import { useRouter, RouterView } from "vue-router";
import {
  reqUserDetail,
  reqUserPlayRecord,
  reqUserDjRadio,
  reqUserPlaylist,
} from "../../api";
import {
  reqUserDetailType,
  PlayRecordType,
  DjRadioType,
  playListType,
} from "../../types/types";
import Head from "../../components/User/head.vue";
import Empty404 from "../../components/404.vue";
import SongRank from "../../components/User/songRank.vue";
import DjList from "../../components/User/djList.vue";
import Playlist from "../../components/User/playlist.vue";

const router = useRouter();

//获取query Id参数
const id: string | undefined = router.currentRoute.value.query.id?.toString();

type dataType = {
  detail: reqUserDetailType | null;
  playRecordType: 0 | 1;
  playRecord: PlayRecordType[];
  playRecordStatus: boolean[];
  djRadios: DjRadioType[];
  jRadiosIsEmpty: boolean;
  is404: boolean;
  playlist: {
    currentPage: number;
    more: boolean;
    list: playListType[];
    isEmpty: boolean;
  };
  isHome: boolean;
};

const data = ref<dataType>({
  detail: null,
  playRecordType: 1,
  playRecord: [],
  playRecordStatus: [false, false],
  djRadios: [],
  jRadiosIsEmpty: false,
  is404: false,
  playlist: {
    currentPage: 1,
    more: false,
    list: [],
    isEmpty: false,
  },
  isHome: true,
});

const changeType = (type: 0 | 1) => {
  data.value.playRecordType = type;
};

const getUserDetail = async () => {
  if (!id) return;
  console.log(data.value.detail)
  try {
    await new Promise((resolve,reject)=>{
      setTimeout(()=>reject(3),0)
    })
  } catch (error) {
    console.log(error)
  }
  try {
    data.value.detail = await reqUserDetail(id);
    console.log(data.value.detail)
    return data.value.detail
  } catch (error) {
    console.log(error)
    data.value.is404=!data.value.is404
  }
};

const getUserDjRadio = async () => {
  if (!id) return;
  data.value.djRadios = await (await reqUserDjRadio(id)).djRadios;
  if (data.value.djRadios.length === 0) data.value.jRadiosIsEmpty = true;
};

const getUserPlaylist = async () => {
  if (!id) return;
  let res = await reqUserPlaylist(id, data.value.playlist.currentPage, 19);
  data.value.playlist.list = res.playlist;
  data.value.playlist.more = res.more;
  if (data.value.playlist.currentPage === 1 && res.playlist.length === 0)
    data.value.playlist.isEmpty = true;
};

const getPlayRecord = async () => {
  if (!id || (data.value.playRecordStatus[0] && data.value.playRecordType)) {
    data.value.playRecord = [];
    return;
  }
  data.value.playRecord = [];
  data.value.playRecord = (
    await reqUserPlayRecord(id, data.value.playRecordType)
  )[data.value.playRecordType ? "weekData" : "allData"];
  if (data.value.playRecord.length === 0 && !data.value.playRecordStatus[0]) {
    data.value.playRecordStatus[data.value.playRecordType ? 0 : 1] = true;
    if (data.value.playRecordStatus[0]) {
      data.value.playRecordType = 0;
    }
  } else if (
    data.value.playRecord.length === 0 &&
    data.value.playRecordStatus[0]
  ) {
    data.value.playRecordStatus[1] = true;
  }
};

const checkIsHome = () => {
  nextTick(() => {
    data.value.isHome = router.currentRoute.value.path === "/user/home";
  });
};

onMounted(() => {
  checkIsHome();
  getUserDetail().then((res) => {
    if (!data.value.detail?.peopleCanSeeMyPlayRecord) return;
    getPlayRecord();
  });
  getUserDjRadio();
  getUserPlaylist();
});

watch(() => data.value.playRecordType, getPlayRecord);

router.beforeEach((to, form, next) => {
  data.value.isHome = to.path === "/user/home";
  if(to.query.id!==form.query.id&&to.path===to.path)setTimeout(()=>location.reload(),0)
  next();
});

console.log(data.value);
</script>

<style lang="scss" scoped>
.user-home-page {
  width: 982px;
  min-height: calc(100vh - 278px);
  border-left: 1px solid #d3d3d3;
  border-right: 1px solid #d3d3d3;
  background: #fff;
  overflow: hidden;
  padding: 40px 40px 0;

  .user-dj-list {
    margin-bottom: 24px;
  }
  .user-song-rank {
    margin-bottom: 36px;
  }
}
</style>
